/*****************/
/* default style */
/*****************/
body, div, p, input, ul {
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
}

a {
    position: absolute;
    display: inline-block;
    text-decoration: none;
    outline: none;
}

body {
    position: absolute;
    width: 1280px;
    height: 720px;
    background: url(img/bg.jpg) no-repeat;
    font-family: "Microsoft YaHei", sans-serif;
}

/****************/
/* common style */
/****************/
.city__mask {
    position: absolute;
    width: 1280px;
    height: 720px;
    background: rgba(0, 0, 0, .9);
    z-index: 10;
}

.separator {
    position: absolute;
    left: 50%;
    margin-left: -530px;
    width: 1060px;
    height: 1px;
    background: #fff;
    opacity: .1;
}

.arrow-up,
.arrow-down,
.arrow-up--blur,
.arrow-down--blur {
    position: absolute;
    left: 50%;
    margin-left: -19px;
    bottom: 40px;
    width: 38px;
    height: 29px;
}

.arrow-up,
.arrow-down {
    background: url(img/arrow_ver-focus.png) center no-repeat;
}

.arrow-up--blur,
.arrow-down--blur {
    background: url(img/arrow_ver.png) center no-repeat;
}

.arrow-up,
.arrow-up--blur {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

/**************/
/* font style */
/**************/
@font-face {
    font-family: 'din_regularalternate';
    src: url(./font/Alternate.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}